<template>
	<view>
		<u-row>
			<u-col span="12">
				<!-- 通过加上u-sticky来使tabs滑动浮动在最顶部。 -->
				<u-sticky bgColor="#fff">
					<u-tabs :list="tabList" :current="current" :scrollable="false" :lineWidth="100" :lineHeight="7"
						:activeStyle="{
				    color: '#3c9cff',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" @change="tabsChange"></u-tabs>
				</u-sticky>
			</u-col>
		</u-row>
		<!-- 首页 -->
		<view v-if="current === 0">
			<u-row>
				<u-col span="12">
					<!-- 轮播图 -->
					<u-swiper :list="swiperList" :height="300" indicator indicatorMode="line" circular></u-swiper>
				</u-col>
			</u-row>
			<u-row class="zhishi_main">
				<u-col :span="3">
					<u--image :radius="20" :showLoading="true" :src="src" width="150rpx" height="150rpx"></u--image>
				</u-col>
				<u-col :span="9">
					<u--text :lines="1" :size="35" text="你不知道的JavaScript(上卷).PDF"></u--text>
					<view style="display: flex;">
						<u-tag text="标签1" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签2" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签3" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签4" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
					</view>
				</u-col>
			</u-row>
			<u-row class="zhishi_main">
				<u-col :span="3">
					<u--image :radius="20" :showLoading="true" :src="src" width="150rpx" height="150rpx"></u--image>
				</u-col>
				<u-col :span="9">
					<u--text :lines="1" :size="35" text="你不知道的JavaScript(上卷).PDF"></u--text>
					<view style="display: flex;">
						<u-tag text="标签1" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签2" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签3" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
						<u-tag text="标签4" plain size="mini" style="padding: 25rpx 10rpx;"></u-tag>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 分类 -->
		<view v-else-if="current === 1">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabList: [{
					name: '首页',
				}, {
					name: '我的'
				}],
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		},
		methods: {
			tabsChange(item) {
				this.current = item.index
			}
		}
	}
</script>

<style>
	/deep/ .u-tabs__wrapper__nav__line {
		left: 46rpx;
	}

	.zhishi_main {
		padding: 20rpx 20rpx;
	}
</style>